<template>
  <div class="allHostComments" ref="containerRef">
    <div class="title">精彩评论</div>
    <div class="list">
      <CommentFloorVue
        v-for="comment in displayComments"
        :comment-data="comment"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { onMounted, ref, watch } from "vue";
import { Comment } from "@/types/comment";
import { useHotComments } from "@/hooks/commentHook";
import useScrollLoad from "@/hooks/useScrollLoad";
import CommentFloorVue from "@/components/CommentFloor/CommentFloor.vue";

const { hotComments, queryHotComments, total } = useHotComments();
const displayComments = ref<Comment[]>([]);
const route = useRoute();
const hotCommentsLimit = 20;
let hotCommentsPage = 0;

const loadMore = () => {
  if (displayComments.value.length !== total.value) {
    hotCommentsPage = hotCommentsPage + 1;
    queryHotComments({
      id: Number(route.query.id),
      type: Number(route.query.type),
      limit: hotCommentsLimit,
      offset: hotCommentsPage * hotCommentsLimit,
    });
  }
};

const { containerRef } = useScrollLoad(loadMore);
onMounted(() => {
  if (route.query.id && route.query.type !== undefined) {
    queryHotComments({
      id: Number(route.query.id),
      type: Number(route.query.type),
      limit: hotCommentsLimit,
      offset: hotCommentsPage * hotCommentsLimit,
    });
  }
});

watch(
  () => hotComments.value,
  (n, o) => {
    console.log(n);
    displayComments.value = displayComments.value.concat(n);
  }
);
</script>

<style scoped lang="less">
.allHostComments {
  height: 100%;
  padding: 16px;
  overflow-y: auto;
  .title {
    color: #333;
    font-weight: bold;
    font-size: 18px;
  }
  .list {
    margin-top: 16px;
  }
}
</style>
